<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>钩子函数和过滤器</title>
</head>
<body>
<div id="app">
    <p>{{time | time_filter}}————1次过滤</p>
    <p>{{time | time_filter |numb_filter}}————2次过滤</p>
</div>
<script>
    Vue.filter('numb_filter',function(value){
        value = value.split('');
                for (let i = 0; i < value.length; i++) {
                    if (value[i] === '0') {
                        value[i] = '零'
                    }
                    if (value[i] === '1') {
                        value[i] = '一'
                    }
                    if (value[i] === '2') {
                        value[i] = '二'
                    }
                    if (value[i] === '3') {
                        value[i] = '三'
                    }
                    if (value[i] === '4') {
                        value[i] = '四'
                    }
                    if (value[i] === '5') {
                        value[i] = '五'
                    }
                    if (value[i] === '6') {
                        value[i] = '六'
                    }
                    if (value[i] === '7') {
                        value[i] = '七'
                    }
                    if (value[i] === '8') {
                        value[i] = '八'
                    }
                    if (value[i] === '9') {
                        value[i] = '九'
                    }
                }
                return value.toString()
    })

    let app = new Vue({
        el: '#app',
        data: {
            time: new Date(),
        },
        created: function () {
            alert('创建完成还未挂载DOM')
        },
        mounted: function () {
            alert('已经挂载DOM');
            let that = this;
            that.timer = setInterval(function () {
                that.time = new Date()
            }, 100)
        },
        filters: {
            time_filter: function (value) {
                let setdate = function (value) {
                    if (value < 10) {
                        value = '0' + value
                    }
                    return value
                };
                let arr = ['一', '二', '三', '四', '五', '六', '日'];
                let date = new Date(value);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let week = date.getDay() + 1;
                let hour = setdate(date.getHours());
                let min = setdate(date.getMinutes());
                let second = setdate(date.getSeconds());
                return year + '年' + month + '月' + day + '日' + '星期' + arr[week] + hour + ':' + min + ':' + second
            },

        }
    })
    /*
* >>>生命周期钩子函数
* created，实例创建完成但还未挂载到DOM，需要初始化数据时比较有用
* mounted，挂载到实例后调用，业务逻辑一般从这里开始beforeDestroy，实例销毁前调用，用于解绑一些使用addEventListener监听事件
*
* >>>过滤器
* 过滤器：{{time | time_filter1(value1，value2)}}
* 插值的尾部加管道符 “ | ” 对数据进行过滤，常用于格式化文本，如字母全大写、货币千位使用逗号分隔等。过滤的规则是自定义
* 通过给 Vue 实例添加选项 filters 来设置，filters是一个对象
* 插值可以接受任意个过滤器（即可以串联），且过滤器可以接受参数。
* 以过滤器time_filter1(value1，value2)为例其对应的函数 time_filter: function (value)
* value是默认是第一个参数，value1，value2其实分别对应过滤器的第二个和第三个参数
* 过滤器可以注册全局( Vue.filter('my-filter', function (value) {do soming}) )或局部( filters:{filter1:function(){}} )
* */
</script>
</body>
</html>